<template>
  <div id="banner-wrap">
    <div class="banner-wrap" :style="{height: `${height}px`}" @mouseenter="onStop" @mouseleave="onGo">
      <transition-group tag="ul" name="list">
        <li v-for="(list, index) in banners.childFloor" :key="index" v-show="index === currentIndex">
          <router-link :to="list.link || ''">
            <img v-lazy="list.floorPhotoPath">
          </router-link>
        </li>
      </transition-group>
      <p class="dots">
        <span v-for="(item, index) in banners.childFloor" 
          :key="index" 
          :class="{actived: index === currentIndex}" 
          @click="onChange(index)">
        </span>
      </p>
      <!-- 编辑按钮 -->
      <div class="edit-container" v-if="edit">
        <w-button class="main edit" @on-click="showBannerEdit()">编辑</w-button>
      </div>
      <div class="shadow"></div>
    </div>
    <!-- 弹框 -->
    <div class="popup">
      <!-- Banner配置弹框 -->
      <div class="edit-banner">
        <w-panel-fixed-wrap v-model="showEditBanner" class="cb" title="Banner配置" width="1000px" 
          height="500px" @on-confirm="saveBannerParams" @on-cancel="hideBannerEdit">
          <div class="banner-container">
            <div class="line">
              <span class="name">排序</span>
              <w-input class="ml28" rule="isEmpty|onlyInt" error="必填|只能为数字" v-model="params.sequence"></w-input>
              <span class="tip">根据设置的数字进行位置排序，数字越小，位置越靠上</span>
            </div>
            <div class="line">
              <span class="name">是否展示</span>
              <div class="content">
                <w-radio label="0" name="isShow" v-model="params.isOpen">是</w-radio>
                <w-radio label="1" name="isShow" v-model="params.isOpen">否</w-radio>
                <span class="tip2">设置否，则此楼层不在个人店铺首页展示</span>
                <!-- 添加banner图 -->
                <w-panel-normal class="mt110">
                  <w-panel-title>
                    <w-button class="main fl mt10" @on-click="addBannerItem()">添加</w-button>
                  </w-panel-title>
                  <div class="banner-line" v-for="(list, index) in banners.childFloor" :key="index">
                    {{list.floorName}}
                    <span class="operation">
                      <span class="edit" @click="editBannerItem(list)">修改</span>
                      <span class="delete" @click="deleteBannerItem(list)">删除</span>
                    </span>
                  </div>
                </w-panel-normal>
                <div class="tip-title">最多可设置8张banner</div>
              </div>
            </div>
          </div>
        </w-panel-fixed-wrap>
      </div>
      <!-- Banner配置弹框 -->
      <div class="set-banner">
        <w-panel-fixed-wrap class="cb" v-model="showSetBanner" title="设置Banner" width="1000px" 
          height="500px" @on-confirm="addNewBannerSet" @on-cancel="hideBannerSet">
          <form id="addNewBanner" :action="url" method="POST" enctype="multipart/form-data">
            <div class="banner-container">
              <div class="line">
                <span class="name">名称</span><w-input class="ml28" :validate="false" name="floorName" v-model="params.floorName"></w-input>
              </div>
              <div class="line">
                <span class="name">上传图片</span>
                <div class="upload">
                  上传<input type="file" id="file-upload" name="floorPhotoId" @change="getImageRealPath($event.target)" accept="image/jpeg,image/gif,image/png">
                </div>
                <!-- <w-button class="upload">上传<input id="file-upload" type="file" name="floorPhotoId" @change="getImageRealPath($event.target)" accept="image/jpeg,image/gif,image/png"></w-button> -->
                <img class="prev-image" :src="params.floorPhotoId" alt="">
              </div>
              <!-- 关联搜索组件 -->
              <associated-search :show-link="true" :tab-type="params.linkedProductType" :link="params.linkedProductUrl" @on-input="getInputValue" @header="setNavigationType"></associated-search>
              <!-- 添加商品和已选商品选项框 -->
              <div class="add-exists-goods" v-if="!params.linkedProductType">
                <product-group :goods="goodsList" :products="params.goodsList" v-model="params.goodsIdList"></product-group>
              </div>
              <!-- 隐藏字段 -->
              <div class="hidden">
                <input type="hidden" name="goodsIdList" :value="params.goodsIdList">
                <input type="hidden" name="accessToken" :value="params.accessToken">
                <input type="hidden" name="sequence" :value="params.sequence">
                <input type="hidden" name="isOpen" :value="params.isOpen">
                <input type="hidden" name="floorType" value="Banner">
                <input type="hidden" name="displayMode" value="2">
                <input type="hidden" name="id" :value="params.id">
                <input type="hidden" name="linkedProductType" :value="params.linkedProductType">
                <input type="hidden" name="linkedProductUrl" :value="params.linkedProductUrl">
                <input type="hidden" name="decorationType" value="PC">
              </div>
            </div>
          </form>
        </w-panel-fixed-wrap>
      </div>
    </div>
  </div>
</template>

<script>
  // 商品组件
  import productGroup from '../pages/adorn/pc/productGroup'

  // 关联商品搜索组件
  import associatedSearch from '../pages/adorn/pc/associatedSearch'

  // 简单上传
  import singleUpload from '../components/Upload/singleUpload'

  // 店铺PC装修的链接
  import { apiAdornPC } from '../common/api'
  import { API } from '../common/config'

  // 导入检验的js
  import { validateFloorParam, inSelectedGoodsList } from '../pages/adorn/validate'
  import { getFileRealPath } from '../common/util'

  export default {
    components: {
      productGroup,
      associatedSearch,
      singleUpload
    },
    computed: {
      url() {
        // 如果当前是修改状态
        if (this.params.isEdit) {
          return `${API}decoration/updateFloor`
        }
        // 当前是新增状态
        return `${API}decoration/addFloor`
      }
    },
    props: {
      edit: {
        type: Boolean,
        default: false
      },
      banners: {
        type: Object,
        default: () => { return {} }
      },
      height: {
        type: Number,
        default: 422
      },
      duration: {
        type: Number,
        default: 3000
      }
    },
    data() {
      return {
        currentIndex: 0,
        timer: '',
        btnShow: false,
        wordType: 'goods',
        showEditBanner: false,
        showSetBanner: false,
        goodsList: [],
        params: {
          accessToken: this.$store.getters.token,
          decorationType: 'PC',
          sequence: 0,
          isOpen: 0,
          floorType: 'Banner',
          displayMode: 1,
          goodsIdList: '',
          goodsList: [],
          floorName: '',
          floorPhotoId: '',
          linkedProductType: 0,
          linkedProductUrl: '',
          isEdit: false
        }
      }
    },
    watch: {
      banners() {
        // 如果有关闭按钮
        if (this.banners.isOpen) {
          this.params.isOpen = this.banners.isOpen
        }
        // 如果有关闭按钮
        if (this.banners.sequence) {
          this.params.sequence = this.banners.sequence
        }
      }
    },
    created() {
      this.$nextTick(() => {
        this.timer = setInterval(() => {
          this.autoPlay()
        }, this.duration)
      })
    },
    methods: {
      /**
       * 获取图片的真实路径
       */
      getImageRealPath(file) {
        this.params.floorPhotoId = getFileRealPath(file)
      },

      /**
       * 设置类型
       */
      setNavigationType(value) {
        this.params.linkedProductType = 1

        // 如果当前是商品
        if (value == 'goods') {
          this.params.linkedProductType = 0
        }
      },

      onGo() {
        this.timer = setInterval(() => {
          this.autoPlay()
        }, this.duration)
        this.btnShow = false
      },
      onStop() {
        clearInterval(this.timer)
        this.timer = null
        this.btnShow = true
      },
      onChange(index) {
        this.currentIndex = index
      },
      autoPlay() {
        this.currentIndex++
        if (this.banners.childFloor && this.currentIndex > this.banners.childFloor.length - 1) {
          this.currentIndex = 0
        }
      },

      /**
       * 展示banner编辑页面
       */
      showBannerEdit() {
        this.params.sequence = (this.banners.sequence || 1)
        this.showEditBanner = true
      },

      /**
       * 隐藏轮播图编辑页面
       */
      hideBannerEdit() {
        this.showEditBanner = false
      },

      /**
       * 隐藏轮播图编辑页面
       */
      saveBannerParams() {
        // 如果序号没有填写，或者是否展示没有填写
        if (!this.params.sequence || !this.banners.childFloor || this.banners.childFloor.length == 0) {
          this.showEditBanner = false
          return
        }

        apiAdornPC.saveFloor({
          accessToken: this.$store.getters.token,
          decorationType: 'PC',
          sequence: Number(this.params.sequence),
          isOpen: Number(this.params.isOpen),
          floorType: 'Banner'
        }).then((v) => {
          this.showEditBanner = false
          this.$emit('refress')
        })
      },

      /**
       * 隐藏设置banner页面，展示轮播图页面
       */
      hideBannerSet() {
        // 清空上一次查询的内容
        this.goodsList = []

        // 展示banner编辑页面
        this.showEditBanner = true

        // 隐藏设置Banner
        this.showSetBanner = false
      },

      /**
       * 新增新的Banner
       */
      addNewBannerSet() {
        // 商品没选，则提示
        if (!validateFloorParam(this.params)) {
          return
        }
        // 想后台发送请求新增
        this.$emit('add', this.hideBannerSet)
      },

      /**
       * 删除当前banner
       *
       * @params { Object } nav 导航
       */
      deleteBannerItem(nav) {
        this.$modal({
          title: '删除',
          content: '是否删除此条banner',
          onConfirm: () => {
            this.$emit('delete', {id: nav.id, callback: this.hideBannerSet})
          }
        })
      },

      /**
       * 点击新增Banner
       */
      addBannerItem() {
        // 如果banner新增超过8张
        if (this.banners.childFloor && this.banners.childFloor.length == 8) {
          this.$toast('最多只可设置8张banner')
          return
        }

        // 如果排序字段没有填写
        if (!this.params.sequence) {
          this.$toast('请输入排序')
          return
        }

        // 标记当前是编辑状态
        this.params = {
          accessToken: this.$store.getters.token,
          decorationType: 'PC',
          sequence: this.params.sequence,
          isOpen: this.params.isOpen || 1,
          floorType: 'Banner',
          displayMode: 1,
          goodsIdList: '',
          floorName: '',
          floorPhotoId: '',
          linkedProductType: 0,
          linkedProductUrl: '',
          isEdit: false
        }

        // 隐藏banner编辑页面
        this.showEditBanner = false

        // 展示设置Banner
        this.showSetBanner = true
      },

      /**
       * 点击编辑Banner
       *
       * @param { Object } banner 当前操作的banner
       */
      editBannerItem(banner) {
        // 商品id集合
        let goodsIdList = []

        // 将商品id取出
        if (banner.goodsList && banner.goodsList.length > 0) {
          banner.goodsList.forEach((v) => {
            goodsIdList.push(v.goodsId)
          })
        }
        // 标记当前是编辑状态
        this.params = {
          id: banner.id,
          accessToken: this.$store.getters.token,
          decorationType: 'PC',
          sequence: this.params.sequence,
          isOpen: this.params.isOpen,
          floorType: 'Banner',
          displayMode: banner.displayMode,
          goodsIdList: goodsIdList.join(','),
          goodsList: banner.goodsList,
          floorName: banner.floorName,
          floorPhotoId: banner.floorPhotoPath,
          linkedProductType: banner.linkedProductType,
          linkedProductUrl: banner.linkedProductUrl,
          isEdit: true
        }

        // 隐藏banner编辑页面
        this.showEditBanner = false

        // 展示设置Banner
        this.showSetBanner = true
      },

      /**
       * 设置搜索关键字类型 goods: 按照商品搜索 link: 按照链接搜索
       *
       * @param { String } value 搜索的参数
       */
      getInputValue(value) {
        // debugger
        // 如果当前是商品
        if (value.type == 'link') {
          this.params.linkedProductType = 1
          this.params.linkedProductUrl = value.goodsLink
        }

        // 如果当前是按商品查询
        if (value.type == 'goods') {
          // 设置类型是链接
          this.params.linkedProductType = 0

          // 设置token
          value.accessToken = this.$store.getters.token

          // 先清空商品列表
          this.goodsList = []

          // 获取参数
          apiAdornPC.searchGoodsByParams(value).then((data) => {
            // 如果没有获取到商品列表
            if (!data.list || data.list.length == 0) {
              return
            }
            this.goodsList = data.list // 重新查询商品数据时，显示所有数据
            // 遍历数据
            // data.list.forEach((v) => {
            //   // 如果当前商品不在已选列表中
            //   if (!inSelectedGoodsList(v, this.params.goodsList)) {
            //     this.goodsList.push(v)
            //   }
            // })
          })
        }
      },

      /**
       * 设置搜索关键字类型 goods: 按照商品搜索 link: 按照链接搜索
       *
       * @param { String } type 关键字类型
       */
      setWordType(type) {
        this.wordType = type
      }
    }
  }
</script>

<style lang="scss" scoped>
  .ml28 {
    display: inline-block;
    width: 236px;
  }
  .mt110 {
    margin-top: 110px;
  }
  .mt10 {
    margin-top: 10px;
  }
  .prev-image {
    display: inline-block;
    width: auto;
    height: 30px;
    margin-bottom: -10px;
  }
  .tip {
    margin-left: 20px;
  }
  .tip2 {
    margin-left: 165px;
  }
  .banner-container {
    margin-top: -10px;

    .line {
      margin-bottom: 34px;

      .name {
        display: inline-block;
        float: left;
        width: 96px;
        line-height: 30px;
        text-align: right;
        padding-right: 20px;
      }

      .upload {
        position: relative;
        overflow: hidden;
        width: 90px;
        height: 30px;
        line-height: 26px;
        background-color: #47bdf4;
        color: #FFFFFF;
        text-align: center;
        vertical-align: middle;
        display: inline-block;
        border-radius: 4px;
        cursor: pointer;

        input[type=file] {
          cursor: pointer;
          position: absolute;
          opacity: 0;
          width: 1000px;
          height: 1000px;
          top: 0px;
          left: 0px;
        }
      }

      .content {
        display: inline-block;
        padding-top: 6px;

        .banner-line {
          border-bottom: 1px solid #e6e6e6;
          width: 800px;
          height: 64px;
          line-height: 64px;
          padding: 0px 30px;

          &:last-child {
            border-bottom: 0px;
          }

          .operation {
            color: #f20685;
            float: right;

            .edit {
              cursor: pointer;
              margin-right: 26px;
            }

            .delete {
              cursor: pointer;
              margin-right: 10px;
            }
          }
        }

        .tip-title {
          color: #fe7e03;
          padding: 14px 30px;
        }
      }
    }
  }
  .add-exists-goods {
    margin: 0px -10px;
    
    .product-container {
      display: inline-block;
      width: 602px;

      &.mr26 {
        margin-right: 26px;
      }
    }
  }
  .banner-wrap {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    &:hover {
      .edit-container {
        display: block;
      }

      .shadow {
        display: block;
      }
    }
    .shadow {
      background-color: rgba(0, 0, 0, 0.6);
      display: none;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0px;
      z-index: 10;
    }
    ul {
      width: 100%;
      height: 100%;
      li {
        position: absolute;
        width: 100%;
        height: 100%;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .dots {
      position: absolute;
      z-index: 10;
      bottom: 50px;
      left: 0;
      width: 100%;
      text-align: center;
      font-size: 0;
      span {
        display: inline-block;
        width: 14px;
        height: 14px;
        margin: 0 8px;
        background: #000;
        border: 1px solid #535353;
        border-radius: 7px;
        cursor: pointer;
        &.actived {
          background: #fff;
          border-color: #fff;
        }
      }
    }
    .edit-container {
      display: none;
      width: 1000px;
      margin: 0 auto;
      margin-bottom: -80px;
      position: relative;

      .edit {
        position: absolute;
        right: 0px;
        top: -400px;
        z-index: 15;
      }
    }
  }
  .list-enter-active {
    transition: all .3s ease;
    transform: translateX(0)
  }
  .list-leave-active {
    transition: all .3s ease;
    transform: translateX(-100%)
  }
  .list-enter {
    transform: translateX(100%)
  }
  .list-leave {
    transform: translateX(0)
  }
  .btn-enter-active, .btn-leave-active {
    transition: all .2s ease;
  }
  .btn-enter, .btn-leave-to {
    opacity: 0;
  }
</style>